<template>
  <div v-loading="listLoading" class="app-container">
    <h2>模型详情</h2>
    <div class="section">
      <el-descriptions title="">
        <el-descriptions-item label="模型名称">{{ model.modelName }}</el-descriptions-item>
        <el-descriptions-item label="模型描述">{{ model.modelDesc }}</el-descriptions-item>
        <el-descriptions-item label="模型模版">{{ model.modelType | modelTypeFilter }}</el-descriptions-item>
        <el-descriptions-item label="资源个数">{{ model.resourceNum }}个</el-descriptions-item>
        <el-descriptions-item label="Y值字段">
          <el-tag size="small">{{ model.yValueColumn }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="section">
      <h3>模型资源</h3>
      <el-table
        :data="modelResources"
        border
      >
        <el-table-column
          prop="resourceName"
          label="资源名称"
        />
        <el-table-column
          prop="organName"
          label="所属机构"
        />
        <el-table-column
          prop="fileNum"
          label="原始记录数"
        />
        <el-table-column
          prop="alignmentNum"
          label="对齐后记录数量"
        />
        <el-table-column
          prop="primitiveParamNum"
          label="原始变量数量"
        />
        <el-table-column
          prop="modelParamNum"
          label="入模变量数量"
        />
        <!-- <el-table-column
          prop=""
          label="操作"
        >
          <template>
            <el-button type="text">下载字段</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="section">
      <h3>模型耗时</h3>
      <el-descriptions :column="1" label-class-name="time-consuming-label" :colon="false">
        <el-descriptions-item label-class-name="total-time-label">
          <span class="el-icon-time" />
          <span class="total-time-label">总耗时:</span>
          <span v-if="model.totalTime" class="total-time">{{ model.totalTime | timeFilter }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-for="item in modelComponent" :key="item.componentId" :label="item.componentName">
          <el-progress :percentage="item.timeRatio * 100" status="success" class="progress-line" />
          <span class="el-icon-time" />
          <span>耗时 {{ item.timeConsuming | timeFilter }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="modelQuotas.length>0" class="section">
      <h3>模型评估指标</h3>
      <el-table
        :data="modelQuotas"
        style="width: 100%"
      >
        <el-table-column
          prop="quotaType"
          label=""
        >
          <template slot-scope="{row}">
            <span>{{ row.quotaType | quotaTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="auc"
          label="AUC"
        />
        <el-table-column
          prop="ks"
          label="KS"
        />
        <el-table-column
          prop="gini"
          label="Gini"
        />
        <el-table-column
          prop="precision"
          label="Precision"
        />
        <el-table-column
          prop="recall"
          label="Recall"
        />
        <el-table-column
          prop="f1Score"
          label="F1-score"
        />
      </el-table>
    </div>
    <div class="section">
      <h3>模型ks值</h3>
      <!-- <div class="img-container">
        <div v-for="item in modelQuotas" :key="item.quotaId">
          <p>{{ item.quotaType | quotaTypeFilter }}</p>
          <img :src="item.quotaImage" alt="">
        </div>
      </div> -->
      <line-chart :chart-data="lineChartData" />
    </div>
  </div>
</template>

<script>
import { getModelDetail, getModelPrediction } from '@/api/model'
import LineChart from '@/components/Charts/LineChart.vue'

export default {
  components: {
    LineChart
  },
  filters: {
    quotaTypeFilter(type) {
      const typeMap = {
        1: '训练样本集',
        2: '测试样本集'
      }
      return typeMap[type]
    },
    timeFilter(time) {
      const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
      const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
      const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
      return hour + ':' + min + ':' + sec
    }
  },
  data() {
    return {
      listLoading: false,
      model: {},
      modelQuotas: [],
      modelResources: [],
      modelId: 24,
      modelComponent: [],
      lineChartData: []
    }
  },
  created() {
    this.fetchData()
    this.getChartsData()
  },
  methods: {
    toProjectCreatePage() {
      this.$router.push({
        name: 'ProjectCreate'
      })
    },
    searchProject() {
      console.log('searchProject', this.searchName)
    },
    fetchData() {
      this.listLoading = true
      this.modelId = this.$route.params.id || this.modelId
      getModelDetail({ modelId: this.modelId }).then((response) => {
        this.listLoading = false
        console.log('response.data', response.result)
        const { model, modelQuotas, modelResources, modelComponent } = response.result
        this.model = model
        this.modelQuotas = modelQuotas
        this.modelResources = modelResources
        this.modelComponent = modelComponent
      })
    },
    getChartsData() {
      getModelPrediction({ modelId: this.modelId }).then(res => {
        this.lineChartData = res.result.prediction
        console.log(this.lineChartData)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .time-consuming-label {
  width: 100px;
}
.app-container {
  .total-time-label{
    font-size: 18px;
    margin-right: 10px;
  }
  .total-time{
    font-size: 20px;
  }
  .progress-line {
    width: 400px;
    margin-left: 10px;
  }
  .el-icon-time {
    color: #409EFF;
    margin-right: 3px;
  }
  .section {
    padding:10px 30px;
  }
  .img-container{
    display: flex;
    img{
      width: 500px;
      max-width: 100%;
    }
  }
}
::v-deep .el-table th{
  background: #fafafa;
}
::v-deep .el-descriptions-item__label:not(.is-bordered-label){
  margin-right: 0;
}
</style>
